<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
  <title>后台管理系统</title>
  <style>
  button a{color:#fff!important;}
  .formItem,.formItem .el-form-item__content{width:100%}
  .orgSelectOopover{width:100%;text-align: left;position: relative;border: 1px solid #dcdde2;background: #fff;}
  .orgSelectOopover:hover{background-color: #fff;border-color: #c0c4cc;}
  .orgSelectInput{position: absolute;left: 0;top: 0;width: 90%;}
  .orgSelectInput input{border: none;background: none;}
  .orgSelectInput input:hover{cursor: pointer;}
  .el-tree-node__expand-icon.is-leaf~.el-tree-node__label{color: #1979fd}
</style>
</head>
<body>
  <div id="userManage" class="userManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
      <el-breadcrumb-item>Home</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
        <shiro:hasPermission name="sys:userManager:add">
          <el-button type="primary" @click="toAddUser"><i class="el-icon-plus"></i>添加用户</el-button>
        </shiro:hasPermission>
        <shiro:hasPermission name="sys:userManager:edit">
        <el-button type="success" @click="toUpdateUser"><i class="el-icon-edit"></i>编辑用户</el-button>
        </shiro:hasPermission>
        <shiro:hasPermission name="sys:userManager:edit">
          <el-button type="primary" class="f-fr" @click="showDialogFormVisible">密码安全设置</el-button>
        </shiro:hasPermission>
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" :model="userSearchForm" class="demo-form-inline mainSearchForm" ref="userSearchForm"> 
                <el-form-item label="全部状态:" prop="status" label-width="75px">
                  <el-select clearable v-model="userSearchForm.status" placeholder="全部状态" @visible-change="seleckClick">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="" prop="searchText">
                  <el-input v-model="userSearchForm.searchText" placeholder="输入查询内容" class="input-with-select"></el-input>
                </el-form-item>
                <!-- <div class="mainSearchBtnBox">  -->
                <el-form-item label=""> 
                    <el-button icon="el-icon-search" type="primary" @click="searchTable()" style="margin-left: 10px;">搜索</el-button>
                </el-form-item>    
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                <!-- </div>  -->
            </el-form>
        </div>
        <el-row>
          <el-table  ref="multipleTable" tooltip-effect="dark" border @selection-change="handleSelectionChange" style="width: 100%"  :data="dataTable">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column> -->
            <el-table-column align="center" prop="username" label="登录用户名"></el-table-column>
            <el-table-column align="center" prop="phone" label="手机号" width="130"></el-table-column>
            <el-table-column align="center" prop="name" label="商家名称"></el-table-column>
            <el-table-column align="center" prop="name" label="账号余额"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"  :formatter="dateFormat" width="160"></el-table-column>
            <el-table-column align="center"  label="商家子账号"></el-table-column>
            <el-table-column align="center" prop="status" label="状态" :formatter="transformStatus" width="80"></el-table-column>
            <el-table-column align="center" label="操作" width="150">
              <template slot-scope="scope">
                <shiro:hasPermission name="sys:userManager:edit">
                <div v-if="scope.row.status === 1">
                  <el-button  @click="updateStatus(scope.row.id,2,'禁用')" type="danger"  size="small">
                    禁用
                  </el-button>
                  <el-button  @click="updateStatus(scope.row.id,3,'锁定')" type="warning"  size="small">
                    锁定
                  </el-button>
                </div>

                <div v-else-if="scope.row.status === 2">
                  <el-button @click="updateStatus(scope.row.id,1,'启用')"  type="success"  size="small">
                    启用
                  </el-button>
                </div>
                <div v-else-if="scope.row.status === 3">
                  <el-button @click="updateStatus(scope.row.id,1,'解锁')"  type="primary"  size="small">
                    解锁
                  </el-button>
                </div>
              </shiro:hasPermission>
            </template>

          </el-table-column>
          </el-table>
          <table-pagination v-if="paginationShow" :pager="pager" @change="searchTable"></table-pagination>
        </el-row>
    </div>
<!-- dialog -->
<el-dialog title="密码安全设置" :visible.sync="dialogFormVisible" width="540px">
  <el-form :model="form" :rules="rules" ref="form">
    <el-row :gutter="20">
        <el-form-item label="密码最长使用期限：" :label-width="formLabelWidth" prop="maxDay" style="float: left;margin-right: 10px;">
          <!-- <el-input v-model="form.maxDay" autocomplete="off"></el-input> -->
          <el-input-number v-model="form.maxDay" controls-position="right" :min="1" :max="999" :precision="0"></el-input-number>
        </el-form-item>
        <span style="line-height: 35px;">天</span>
    </el-row>
    <el-form-item label="到期提醒通知设置：" :label-width="formLabelWidth">
      <el-button type="primary" size="medium" class="marginB10" @click="addDomain">添加</el-button>
      <el-form-item
      v-for="(domain, index) in form.domains"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
      :rules="{
      required: true, message: '到期提醒通知天数不能为空', trigger: 'change'
    }"
    style="margin-bottom: 20px;"
    >
    <el-row :gutter="20">
        <!-- <el-input v-model="domain.value"></el-input> -->
        <el-input-number v-model="domain.value" controls-position="right" :min="1" style="float: left;margin-right: 10px;" :precision="0"></el-input-number>
        <el-form-item style="float: left;margin-right: 10px;">天</el-form-item>
        <el-button style="float: left;" type="danger" @click.prevent="removeDomain(domain)">删除</el-button>
    </el-row>
  </el-form-item>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
  <el-button type="primary" @click="submitForm('form')">确 定</el-button>
</div>
</el-dialog>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
var passwordExpires=[[${passwordExpires}]];//密码最大使用时间
var reminderTime=[[${reminderTime}]];//密码到期提醒时间
var domains =[];

var userVM = new Vue({
  el: '#userManage',
  data: {
    paginationShow: false,
    isShow:false,
    userSearchForm: {
      roleId: '',
      status: '',
      searchType: 2,
      searchText: '',
      orgId: '',
      orgName:''
    },
    dataTable:[],
    pager:{
      total: 0,
      currentPage: 1,
      pageSize: 20,
    },
    multipleSelection:[],
    passwordExpires:passwordExpires,
    reminderTime:reminderTime,
    radio:'',
    dialogFormVisible: false,
    dialogFormAdd: false,
    dialogFormChooseRole: false,
    dialogFormChooseOrg: false,
    form: {
      domains: domains,
      maxDay: passwordExpires
    },
    rules: {
      maxDay: [
      { required: true, message: '密码最长使用期限不能为空。', trigger: 'blur' },
      // {  max: 3, message: '最大3个字符', trigger: 'blur' }
      ]
    },
    formLabelWidth: '150px',
    formLabelWidth1: '120px',
    statusOptions: [{
      value: '',
      label: '全部'
    }, {
      value: 1,
      label: '启用'
    }, {
      value: 2,
      label: '禁用'
    }, {
      value: 3,
      label: '锁定'
    }],
    searchTypeOptions: [{
      value: 1,
      label: '登录名'
    }, {
      value: 2,
      label: '姓名'
    }, {
      value: 3,
      label: '手机号'
    }],
    storeForm: {
      roleId: '',
      status: '',
      searchType: 2,
      searchText: '',
      orgId: '',
      orgName:''
    },
    storeId: '',
    scrollTop: 0,
  },
  methods: {
    searchTable() {
      var param ={};

      param.orgId = this.userSearchForm.orgId;
      param.roleId = this.userSearchForm.roleId;
      param.status = this.userSearchForm.status;
      if(this.userSearchForm.searchType=="1"){
        param.username = this.userSearchForm.searchText;
      }else if(this.userSearchForm.searchType=="2"){
        param.name = this.userSearchForm.searchText;
      }else if(this.userSearchForm.searchType=="3"){
        param.phone = this.userSearchForm.searchText;
      }
      param.pageSize = this.pager.pageSize;
      param.pageNum = this.pager.currentPage;
      console.info(param);
      axios.post('/user/userManager/list', param)
      .then(function (response) {
        var result =  response.data;
        console.info(result);
        var table=result.data;
        userVM.dataTable= table.data;
        userVM.pager.total =  table.total;
        userVM.pager.currentPage = table.currentPage;

        // 取出存储的id
        if(!userVM.paginationShow){
           if(userVM.storeId){
               userVM.$nextTick(function(){
                  var storage = [];
                  userVM.dataTable.forEach(function(item, index){
                      if(item.id === userVM.storeId ){
                          storage.push(userVM.dataTable[index]);
                      }
                  })
                  userVM.toggleSelection(storage);
                  userVM.$el.querySelector('.el-table__body-wrapper').scrollTop = userVM.scrollTop;
              })
          }
        }else{
          removeSessionStore ("userManageStoreForm");
          removeSessionStore ("userManageOtherVal");
        }
        userVM.paginationShow = true;
        userVM.storeForm = userVM.userSearchForm;

      })
      .catch(function (error) {
        console.log(error);
      });

    },
    toggleSelection(rows) { // table select 默认选中fn
        if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row,true);
            });
        } else {
            this.$refs.multipleTable.clearSelection();
        }
    },
    resetForm(formName) {
      console.info(this.$refs[formName]);
      this.$refs[formName].resetFields();
      this.$refs[formName].resetFields();
    },
    //选择行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //跳转新增用户页
    toAddUser() {
      document.location.href='/user/userManager/initCreateUser';
    },
    //跳转新增用户页
    toUpdateUser() {
      var rows = this.multipleSelection;
      if(rows.length!=1){
        this.$message({
          message: '请选择一条数据进行修改',
          type: 'warning'
        });
        return;
      }
      // 存储选中信息--start
      var clueId=rows[0].id;  
      setSessionStore("userManageStoreForm", this.storeForm);
      var otherVal = {
          "currentPage": this.pager.currentPage,
          "clueId": clueId,
          "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
      }
      setSessionStore("userManageOtherVal", otherVal);
      // 存储选中信息--end  
      // document.location.href='/user/userManager/initUpdateUser?id='+rows[0].id;
      document.location.href='/user/userManager/initUpdateUser?id='+clueId;
    },
    //修改状态
    updateStatus(id,status,msg) {
      var param = {};
      param.id=id;
      param.status=status;
      var url="/user/userManager/updateStatusDisable";
      if(status  !=1){
    	  url="/user/userManager/updateStatusEnable";
      }
      axios.post(url, param)
      .then(function (response) {
        var result =  response.data;
        if(result.code=="0"){
          userVM.$message({message:'用户'+msg+'成功',type:'success',duration:1000,onClose:function(){
        	  userVM.searchTable();
  	      }});
          
        }else{
          userVM.$message.error(msg+"失败");
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    //状态转换方法
    transformStatus(row, column, cellValue, index) {
      var text="";
      if(cellValue=="1"){
        text="启用"
      }else if(cellValue=="2"){
        text="禁用"
      }else if(cellValue=="3"){
        text="锁定"
      }
      return text;
    },
    //机构名称展示方法
    transformOrg(row, column, cellValue, index) {
      var text="";
      if(row.parentParentOrgName){
    	  text+=row.parentParentOrgName+"-";
      }
      if(row.parentOrgName){
    	  text+=row.parentOrgName+"-";
      }
      if(cellValue){
    	  text+=cellValue;
      }
      return text;
    },
    //角色转换方法
    transformRole(row, column, cellValue, index) {
      var text="";
      if(cellValue!=undefined&&cellValue[0]!=undefined){
        text=cellValue[0].roleName;
      }
      return text;
    },
    //日期数据格式化方法
    dateFormat(row, column, cellValue, index) {
      if (cellValue == undefined) {
         return "";
      }
      return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
    },
    handleSizeChange(val) {
        //下拉框  每页 10,20条切换 调用
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.initTableData(1);
    },
    handleCurrentChange(val) {
        //点击 页码
        console.log(`当前页: ${val}`);
        this.initTableData(val);
    },
    // 提交弹窗
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        console.log(this.form.domains)//
        var domainsList =this.form.domains;
        var array= new Array();
        var newReminderTime="";
        for(var i=0;i<domainsList.length;i++){
          array.push(domainsList[i].value);
          if(i==0){
            newReminderTime=newReminderTime+domainsList[i].value;
          }else{
            newReminderTime=newReminderTime+","+domainsList[i].value;
          }
        }
        if(passwordExpires==this.form.maxDay&&reminderTime==newReminderTime){
          userVM.dialogFormVisible=false;
          return;
        }
        this.$confirm('确定更新保存并执行操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var param = {};
          param.passwordExpires=this.form.maxDay;
          param.reminderTime=array;
          axios.post('/user/userManager/updatePasswordSetting', param)
          .then(function (response) {
            var result =  response.data;
            if(result.code=="0"){
              userVM.$message.success("设置成功");
              userVM.dialogFormVisible=false;
              passwordExpires=userVM.form.maxDay;
              reminderTime=newReminderTime;
            }else{
              userVM.$message.error(result.msg);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    showDialogFormVisible() {
    	if (this.$refs['form']!==undefined) {
    		this.$refs['form'].resetFields();
    	}
    	var newDomains =[];
    	var reminderTimeList=reminderTime.split(",");
    	for(var i=0;i<reminderTimeList.length;i++){
    	  var domain = {};
    	  domain.value=reminderTimeList[i];
    	  newDomains.push(domain);
    	}
    	domains=newDomains;
      this.form.domains=domains;
      this.form.maxDay=passwordExpires;
      this.dialogFormVisible=true;
    },
    removeDomain(item) {
      var index = this.form.domains.indexOf(item)
      if (index !== -1) {
        this.form.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.form.domains.push({
        value: '',
        key: Date.now()
      });
    },
    treeNodeClick(data,node,obj){
      //if(data.children==null){
          this.userSearchForm.orgName=data.label;
          this.userSearchForm.orgId=data.id;
          this.isShow=false
      //}
    },
    seleckClick(){
      // console.log(0)
      this.isShow=false;
    }
  },
  created(){
      // 进入页面判断有是否有存储值
      if(!this.paginationShow){
          var storeVal = getSessionStore("userManageStoreForm");
          var otherVal = getSessionStore("userManageOtherVal");
          if(storeVal && otherVal){
              this.userSearchForm = storeVal;
              this.$set(this.pager,"currentPage",otherVal.currentPage);
              this.storeId = otherVal.clueId;
              this.scrollTop = otherVal.scrollTop;
          }
      };
      // console.info("create method");
      var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
      if(localVal){this.pager.pageSize = localVal;}
      this.searchTable();
  },
  mounted(){
    console.info("mounted method");
    document.getElementById('userManage').style.display = 'block';
  }
})

</script>
</html>